<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<meta name="description" content="App, Subscription Service and General Product Landing Page. Suitable to promote your product and service such as app, subscription service and others.">
		<meta name="author" content="The Develovers">
		<meta name=viewport content="width=device-width, initial-scale=1">
		
		<title>大数据分析平台</title>
		<!--设置是否为缩放模式 -->
		<!--<meta name="viewport" content="width=device-width,initial-scale=1" />-->
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Getparam.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap.min.js"></script>
		<!--echarts JS-->
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>-->
		<!-- 轮播swiper文件 -->
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/style2.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/swiper.min.css">-->
		<script src="js/swiper.min.js"></script>
		<!--界面样式-->
		<!--<script type="text/javascript" src="${ctx }/js/piccutting/fileupload.js"></script>-->
		<script src="js/visual.js?<%=System.currentTimeMillis() %>"></script>
		<script src="js/china.js"></script>
		<script src="js/mobile/chartMap.js"></script>
		<!--<link rel="stylesheet" type="text/css" href="css/visual.css">-->
		<script src="js/liaoling.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/visual.js" type="text/javascript" charset="utf-8"></script>-->
		<!--<script src="js/echarts-gl.js" type="text/javascript" charset="utf-8"></script>-->
		<!--<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>-->
		
	</head>

	<body class="ksh">
		 <!-- 加载动画 -->
		<div id="load">
        <div class="load_img">
           
            <img class="jzxz1" src="images/jzxz1.png">
            <img class="jzxz2" src="images/jzxz2.png">
        </div>
    </div>
		<div class="head_top col-xs-12">
			<div class="header">
				<div class="bg_header">
					<div class="header_nav fl t_title">
						8890大数据服务平台
					</div>
				</div>
			</div>

		</div>
		<div class="visual_box col-xs-12">
			<div class="visual_title">
				<span>各地市办结量</span>
				<img src="images/ksh33.png">
			</div>
			<div class="visual_chart" id="main1" style="height:calc(100% - 35px);width: 100%;">

			</div>
		</div>

		<div class="visual_box col-xs-12">
			<div class="visual_title">
				<span>月累计办结量</span>
				<img src="images/ksh33.png">
			</div>
			<div class="visual_chart" id="main2" style="height:calc(100% - 35px);">

			</div>
		</div>

		<div class="visual_box col-xs-12">
			<div class="visual_title">
				<span>办结办理指数</span>
				<img src="images/ksh33.png">
			</div>
			<div class="visual_chart sfzcll">
				<h5 style="display: flex;justify-content: space-between;">
					<a>类型</a>
					<a>具体数据</a>
				</h5>

				<div class="sfzcll_pos_box">
					<div class="sfzcll_box" style="display: flex;justify-content: space-between;height: 25px;width: 100%;">

						<label id="banjie" style="color: #337ab7;">
							
						</label>
						<div class="sfzcll_smallBk">
							<div class="ygl" id="banjieVal" style="color: #337ab7;">

							</div>
						</div>

					</div>
					<div class="sfzcll_box" style="display: flex;justify-content: space-between;height: 25px;width: 100%;">

						<label id="zongbanli" style="color: #337ab7;"></label>
						<div class="sfzcll_smallBk">
							<div class="ygl" id="zongbanliVal" style="color: #337ab7;">

							</div>
						</div>

					</div>
					<div class="sfzcll_box" style="display: flex;justify-content: space-between;height: 25px;width: 100%;">

						<label id="zongbanjie" style="color: #337ab7;"></label>
						<div class="sfzcll_smallBk">
							<div class="ygl" id="zongbanjieVal" style="color: #337ab7;">

							</div>
						</div>

					</div>
				</div>

			</div>
		</div>
		<div class="visual_con" style="width: 100%;">
			<div class="visual_conBot" style="width: 100%;">
				<div class="visual_chart_text text-center" style="width: 100%;">
					<h2>辽宁省大数据分析平台</h2>
				</div>
				<div class="visual_chart" id="main8"></div>
			</div>
		</div>

		<div class="visual_right" style="width: 100%;">
			<div class="visual_box col-xs-12" style="width: 100%;">
				<div class="visual_title" style="width: 100%;">
					<span>前十问题及数据</span>
					<img src="images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper1 visual_chart" style="height:calc(100% - 15px);width: 100%;">
					<div class="swiper-wrapper">
						<div class="swiper-slide" id="main3" style="height:100%;"></div>
						<div class="swiper-slide" id="main31" style="height:100% ;"></div>
					</div>
				</div>
			</div>

			<div class="visual_box visualSfzsfl col-xs-12" style="width: 100%;">
				<div class="visual_title" style="width: 100%;">
					<span>各城市办理量</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main9" style="height:calc(100% - 35px);">

				</div>

			</div>

			<div class="visual_box col-xs-12" style="width: 100%;">
				<div class="visual_title" style="width: 100%;">
					<span>月累计办理量</span>
					<img src="images/ksh33.png">
				</div>
				<div class="swiper-slide" id="main4" style="height:calc(100% - 35px);"></div>
				<div class="swiper-container visual_swiper2 visual_chart" style="display: none;">
					<div class="swiper-wrapper">

						<div class="swiper-slide" id="main41" style="display: none;"></div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			$('#load').fadeOut(1000)
				setTimeout(function() {
					$('#load').remove()
				}, 1100);

			//			交通流量
			var myChart1 = echarts.init(document.getElementById('main1'));
			//						myChart1.setOption(option1);
			//			交通工具流量
			var myChart2 = echarts.init(document.getElementById('main2'));
			//			myChart2.setOption(option2);
			//本月发生事件
			var myChart3 = echarts.init(document.getElementById('main3'));
			//			myChart3.setOption(option3);
			var myChart31 = echarts.init(document.getElementById('main31'));

			var mySwiper1 = new Swiper('.visual_swiper1', {
				autoplay: true, //可选选项，自动滑动
				speed: 800, //可选选项，滑动速度
				autoplay: {
					delay: 5000, //1秒切换一次
				},
			})

			var myChart8 = echarts.init(document.getElementById('main8'));
			myChart8.setOption(option8);
//			window.onresize = myChart8.resize;
			//收费站收费量
			var myChart9 = echarts.init(document.getElementById('main9'));
//						myChart9.setOption(option9);
			//移动事件
			//			function CreatDrag(id) {
			//
			//    var oBox = document.getElementById(id);
			//    oBox.onmousedown = function(ev) {
			//        var ev = ev || event;
			//        var Y = ev.clientY;
			//        var X = ev.clientX;
			//        var ToTop  = document.getElementById(id).scrollTop;
			//        var Toleft = document.getElementById(id).scrollLeft;
			//        oBox.onmousemove = function(ev) {
			//            ev = ev || event;
			//            var subY = ev.clientY - Y;
			//            var subX = ev.clientX - X ;
			//            Y = ev.clientY;
			//            X = ev.clientX;
			//            ToTop -= (subY);
			//            Toleft -= (subX);
			//            document.getElementById(id).scrollTop  = ToTop;
			//            document.getElementById(id).scrollLeft =Toleft;
			//        }
			//        document.onmouseup = function() {
			//            oBox.onmousemove = function() {
			//                null;
			//            }
			//        }
			//    }
			//}
		</script>
	</body>

</html>